<script>
	function create_requisition()	
	{
		var materials = new Array();
		
		$('[id^="material_"]').each(function() { 
			var id = $(this).attr('id');			
			id = id.replace('material_', '');
			
			if(parseInt(id))
			{
				materials[id] = { 
					id:  $('#material_' + id + ' #id').val(),
					name:  $('#material_' + id + ' #material_name').val(),
					code:  $('#material_' + id + ' #code').val(),
					quantity: $('#material_' + id + ' #quantity').val(),
					unit: $('#material_' + id + ' #unit').val(),			
				};
			}
		});
		
		var data = {
			rr_number: $('#rr_number').val(),
			requestor_id: 1,
			department_id: $('#department').val(),
			materials: materials
		};
	
		$.ajax({
			url: '<?= base_url() ?>encoder/createrequisition/',
			data: data,
			type: 'POST',
			success: function(data) {
				if(!data)
				{
					alert("Requisition Created.");
					window.location = '<?= base_url() ?>encoder/';
				}
			}
		});
	}

	function show_category(id)
	{
		$('#categories_' + id).toggle();
	}
	
	function show_more(id)
	{
		$('#more_' + id).toggle();
	}
	
	function add_material(id)
	{
		if(!$('#material_' + id).length)
		{
		$('#material_list').append(
			'<tr id="material_' + id + '">' +
				'<td><input id="quantity" type="text" style="width:60px;" placeholder="Quantity" /></td>' +
				'<td><input id="unit" type="text" style="width:100px;" placeholder="Unit" /></td>' +
				'<td><input id="material_name" type="text" style="width:250px;" placeholder="Material Name" onkeyup="show_suggestions(' + id + ');" onblur="hide_suggestions(' + id + ')" /><input id="id" type="hidden" /></td>' +
				'<td><input id="code" type="text" style="width:75px;" placeholder="Code" onkeyup="show_suggestions(' + id + ');" onblur="hide_suggestions(' + id + ')" /></td>' +
				'<td>' +
					'<a href="javascript: show_category(' + id + ')">Category</a>&nbsp;&nbsp;&nbsp;' +
					'<a href="javascript: show_more(' + id + ')">More</a>&nbsp;&nbsp;&nbsp;' +
					'<a href="javascript: add_material(' + (id+1) + ')" style="border:none; background-color:white;"><img src="<?= base_url() ?>images/icons/add.png" style="padding-right:5px;" /></a>&nbsp;' +
					'<a href="javascript: delete_material(' + id + ')" style="border:none; background-color:white;"><img src="<?= base_url() ?>images/icons/delete.png" style="padding-right:5px;" /></a>&nbsp;' +
					'<a href="javascript: add_attachment(' + id + ')" style="border:none; background-color:white;"><img src="<?= base_url() ?>images/icons/attach.png" /></a>' +
				'</td>' +
			'</tr>' +
			'<tr id="suggestions_' + id + '" style="display:none;">' +
			'</tr>' +
			'<tr id="categories_' + id + '" style="display:none;">' +
				'<td colspan="5">' +
					'<div id="category_' + id + '" style="float:left;">' +
						'Category 1&nbsp;&nbsp;' +
						'<select onchange="javascript: add_category(' + id + ', 2)">' +
							'<option value="0">None</option>' +
							<? foreach($categories as $category): ?>
								'<option value="<?= $category->id ?>"><?= $category->name ?></option>' +
							<? endforeach; ?>
						'</select>' +
					'</div>' +
					'<div id="category_2" style="float:left; display:none;">' +
						'&nbsp;&nbsp;Category 2&nbsp;&nbsp;' +
						'<select onchange="javascript: add_category(' + id + ', 3)">' +
							'<option value="0">None</option>' +
							<? foreach($categories as $category): ?>
								'<option value="<?= $category->id ?>"><?= $category->name ?></option>' +
							<? endforeach; ?>
						'</select>' +
					'</div>' +
					'<div id="category_3" style="float:left; display:none;">' +
						'&nbsp;&nbsp;Category 3&nbsp;&nbsp;' +
						'<select>' +
							'<option value="0">None</option>' +
							<? foreach($categories as $category): ?>
								'<option value="<?= $category->id ?>"><?= $category->name ?></option>' +
							<? endforeach; ?>
						'</select>' +
					'</div>' +
				'</td>' +
			'</tr>' +
			'<tr id="more_' + id + '" style="display:none;"> ' +
				'<td colspan="5">' +
					'<textarea style="width:400px;height:100px;float:left;">Remarks</textarea>;' +
					'<div style="float:left;margin-left:20px;">' +
						'Attachments:' +
						'<ul>' +
							'<li><a href="#">Attachment 1</a></li>' +
							'<li><a href="#">Attachment 2</a></li>' +
							'<li><a href="#">Attachment 2</a></li>' +
						'</ul>' +
					'</div>' +
				'</td>' +
			'</tr>	'
		);	
		}
	}
	
	function delete_material(id)
	{
		if($('[id^="material_"]').length > 3)
		{
			$('#material_' + id).remove();
			$('#suggestions_' + id).remove();
			$('#more_' + id).remove();
			$('#categories_' + id).remove();		
		}
		else
		{
			alert('Requisitions must have one or more materials.');
		}
	}
	
	function add_category(material_id, category_id)
	{
		$('#categories_' + material_id + ' #category_' + category_id).show();
	}
	
	function add_attachment()
	{
		$('#file_upload').click();
	}
	
	function show_suggestions(id)
	{
		$.ajax({
			url: '<?= base_url() ?>encoder/getmaterials/' + ($('#material_' + id + ' #material_name').val() ? $('#material_' + id + ' #material_name').val() : '-') + '/' + $('#material_' + id + ' #code').val(),
			success: function(data) {
				var materials = $.parseJSON(data);
				
				$('#suggestions_' + id).empty();
				$('#suggestions_' + id).append('<td colspan="5"></td>');
				$('#suggestions_' + id + ' td').append('<table></table>');
				
				for(var i=0; i<materials.length; i++)
				{
					$('#suggestions_' + id + ' table').append(
						'<tr><td><a href="#" onclick="append_material(' + id + ', ' + materials[i].id + ', \'' + materials[i].name + '\', \'' + materials[i].code + '\')">' + materials[i].name + '</a></td></tr>' 
					);
				}
				
				$('#suggestions_' + id).show();
			}
		});
	}
	
	function hide_suggestions(id)
	{		
		setTimeout(function() { $('#suggestions_' + id).hide() }, 3000);
	}
	
	function append_material(id, material_id, name, code)
	{	
		$('#material_' + id + ' #id').val(material_id);
		$('#material_' + id + ' #material_name').val(name);
		$('#material_' + id + ' #code').val(code);
		$('#suggestions_' + id).hide();
	}
</script>
<br />
<div class="content_box left">
	<header>
		<div class="label">
			<img src="<?= base_url() ?>images/icons/information.png" alt=""><div>Summary</div>		
		</div>	
	</header>
	<section>
		<form>
			<table>
				<tr>
					<td>
						RR Number
					</td>
					<td>
						<input  id="rr_number" type="text" style="width:125px;" />
					</td>
				</tr>
				<tr>
					<td>
						Department
					</td>
					<td>
						<select id="department">
							<? foreach($departments as $department): ?>
								<option value="<?= $department->id ?>"><?= $department->name ?></value>
							<? endforeach; ?>
						</select>	
					</td>
				</tr>	
				<tr>
					<td>
						Requestor
					</td>
					<td>
						<input type="text" style="width:125px;" value="Juan dela Cruz" />
					</td>
				</tr>
			</table>						
		</form>
		<div style="padding:5px 5px 5px; float:right;">
			<a id="new_user_button" href="#" onclick="create_requisition()" class="btn"><span class="icon icon-ok"></span>Submit</a>
			<a id="new_user_button" href="#" class="btn"><span class="icon icon-disk"></span>Save Draft</a>
		</div>		
	</section>
</div>
</div>
<div class="content_box right">
	<header>
		<div class="label">
			<img src="<?= base_url() ?>images/icons/information.png" alt=""><div>Materials</div>		
		</div>	
	</header>
	<section>	
		<form>
			<table id="material_list">
				<tr>
					<th style="width:60px;">Quantity</th>
					<th style="width:100px;">Unit</th>
					<th style="width:275px;">Material Name</th>
					<th style="width:75px;">Code</th>
					<th>Actions</th>
				</tr>
				<tr id="material_1">
					<td><input id="quantity" type="text" style="width:60px;" placeholder="Quantity" /></td>
					<td><input id="unit" type="text" style="width:100px;" placeholder="Unit" /></td>
					<td><input id="material_name" type="text" style="width:250px;" placeholder="Material Name" onkeyup="show_suggestions(1);" onblur="hide_suggestions(1)" /><input id="id" type="hidden" /></td>
					<td><input id="code" type="text" style="width:75px;" placeholder="Code" onkeyup="show_suggestions(1);" onblur="hide_suggestions(1)" /></td>
					<td>
						<a href="javascript: show_category(1)">Category</a>&nbsp;&nbsp;
						<a href="javascript: show_more(1)">More</a>&nbsp;&nbsp;	
						<a href="javascript: add_material(2)" style="border:none; background-color:white;"><img src="<?= base_url() ?>images/icons/add.png" style="padding-right:5px;" /></a>
						<a href="javascript: delete_material(1)" style="border:none; background-color:white;"><img src="<?= base_url() ?>images/icons/delete.png" style="padding-right:5px;" /></a>
						<a href="javascript: add_attachment(1)" style="border:none; background-color:white;"><img src="<?= base_url() ?>images/icons/attach.png" /></a>
					</td>
				</tr>
				<tr id="suggestions_1" style="display:none;">
				</tr>
				<tr id="categories_1" style="display:none;">
					<td colspan="5">
						<div id="category_1" style="float:left;">
							Category 1&nbsp;&nbsp;
							<select onchange="javascript: add_category(1, 2)">
								<option value="0">None</option>
								<? foreach($categories as $category): ?>
									<option value="<?= $category->id ?>"><?= $category->name ?></option>
								<? endforeach; ?>
							</select>				
						</div>
						<div id="category_2" style="float:left; display:none;">
							&nbsp;&nbsp;Category 2&nbsp;&nbsp;
							<select onchange="javascript: add_category(1, 3)">
								<option value="0">None</option>
								<? foreach($categories as $category): ?>
									<option value="<?= $category->id ?>"><?= $category->name ?></option>
								<? endforeach; ?>
							</select>				
						</div>
						<div id="category_3" style="float:left; display:none;">
							&nbsp;&nbsp;Category 3&nbsp;&nbsp;
							<select>
								<option value="0">None</option>
								<? foreach($categories as $category): ?>
									<option value="<?= $category->id ?>"><?= $category->name ?></option>
								<? endforeach; ?>
							</select>				
						</div>
					</td>
				</tr>
				<tr id="more_1" style="display:none;">
					<td colspan="5">
						<textarea style="width:400px;height:100px;float:left;">Remarks</textarea>
						<div style="float:left;margin-left:20px;">
							Attachments:
							<ul>
								<li><a href="#">Attachment 1</a></li>
								<li><a href="#">Attachment 2</a></li>
								<li><a href="#">Attachment 2</a></li>
							</ul>
						</div>
					</td>
				</tr>	
			</table>
		</form>
	</section>
</div>
<input type="file" id="file_upload" style="width:0px;height:0px; padding:0px;" />